
<template>
    <div class="info">
      <div class="top">
        <van-icon @click="$router.back()" name="arrow-left" />
        <p>个人信息</p>
      </div>
      <div class="content">
        <infoList title="头像">
          <template #img>
            <img class="img" :src="infoList.avatar" alt="">
          </template>
        </infoList>
        <infoList title="昵称">
          <template #img>
            <span>{{infoList.nickname}}</span>
          </template>
        </infoList>
        <infoList title="手机号">
          <template #img>
            <span>{{infoList.mobile}}</span>
          </template>
        </infoList>
        <infoList title="性别">
          <template #img>
            <span>{{infoList.sex==3?'保密':''}}</span>
          </template>
        </infoList>
        <infoList title="出生日期" @fn="dateList">
          <template #img>
            <span>{{infoList.birthday}}</span>
          </template>
          <van-datetime-picker v-model="currentDate" type="date" title="选择年月日" :min-date="minDate" :max-date="maxDate" />
        </infoList>
        <infoList title="所在城市"></infoList>
        <infoList title="学科"></infoList>
      </div>
    </div>
  </template>
  
  <script>
  import { getusermessage} from "@/http/request";
  import infoList from '../infolist.vue'
  export default {
    name: '',
    components: { infoList },
    data() {
      return {
        infoList: {
          avatar: require("../../assets/img/header-logo.png"),
        },
        minDate: new Date(2020, 0, 1),
        maxDate: new Date(2025, 10, 1),
        currentDate: new Date(2021, 0, 17),
      }
    },
    created() { },
    mounted() {
      this.getInfo();
    },
    methods: {
      async getInfo() {
        let res = await getusermessage();
        console.log(res);
        this.infoList = res.data.data;
      },
      dateList() {
        console.log(111);
      }
    }
  }
  </script>
  <style scoped lang='scss'>
  .info {
    .top {
      display: flex;
      align-items: center;
      padding: 10px;
  
      p {
        width: 90%;
        text-align: center;
      }
    }
  
    .img {
      width: 40px;
      height: 40px;
      vertical-align: middle;
    }
  }
  </style>
  